<template>

  <el-dialog
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    title="选择试题"
    width="90vw"
    @close="handleClose"
  >

    <div style="height: 90vh">

      <data-table
        ref="pagingTable"
        :options="options"
        :list-query="listQuery"
        @select-changed="handleSelected"
      >
        <template #filter-content>
          <div class="flex-bt">

            <div>
              <repo-select v-model="listQuery.params.repoId" :is-exam="true" @code="repoChange"/>
              <dic-list-select v-model="listQuery.params.quType" dic-code="qu_type" title="选择题型"/>
              <dic-list-select v-model="listQuery.params.quLevel" dic-code="qu_level" title="难度等级"/>
              <key-point-tree-select v-model="listQuery.params.pointCodes" :root="pointRoot" />
              <chapter-select :repo-id="listQuery.params.repoId" v-model="listQuery.params.chapterId" />
              <el-input v-model="listQuery.params.content" size="small" placeholder="试题内容" style="width: 200px;" class="filter-item" />
              <el-checkbox v-model="showDetail" class="filter-item">显示明细</el-checkbox>
            </div>

            <div>
              <el-button type="primary" @click="handleConfirm">{{ selectedLabel }}</el-button>
            </div>
          </div>


        </template>

        <template #data-columns>


          <el-table-column
            label="试题内容"
            show-overflow-tooltip
          >
            <template v-slot="scope">
              <qu-item-show v-if="showDetail" :value="scope.row" :show-analysis="true" :show-num="false" :index="0" :mode="3" :state="1" :show-type="true" />
              <span v-else>{{ scope.row.contentText }}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="题型"
            width="120px"
            prop="quType_dictText"
          />

          <el-table-column
            label="题库"
            show-overflow-tooltip
            align="center"
            width="180px"
            prop="repoId_dictText"
          />

          <el-table-column
            label="知识点"
            show-overflow-tooltip
            width="180px"
            prop="pointNames"
          />

          <el-table-column
            label="难度级别"
            align="center"
            width="100px"
            prop="quLevel_dictText"
          />

          <el-table-column
            label="人工批阅"
            align="center"
            width="100px">

            <template v-slot="{ row }">
              <span v-if="row.manual" class="danger">是</span>
              <span v-else class="success">否</span>
            </template>

          </el-table-column>

        </template>

      </data-table>

    </div>

  </el-dialog>

</template>

<script>

import QuItemShow from '@/views/admin/repo/qu/components/QuItemShow.vue'
import ChapterSelect from '@/components/ChapterSelect/index.vue'
import KeyPointSelect from '@/components/KeyPointSelect/index.vue'
import KeyPointTreeSelect from '@/components/KeyPointTreeSelect/index.vue'

export default {
  name: 'QuSelectDialog',
  components: { KeyPointTreeSelect, KeyPointSelect, ChapterSelect, QuItemShow },
  props: {
    quType: String,
    excludes: Array,
    dialogShow: {
      type: Boolean,
      default: false
    },
    forExam: Boolean
  },
  data() {
    return {

      dialogVisible: false,
      selectedLabel: '请勾选试题',

      listQuery: {
        current: 1,
        size: 10,
        params: {
          content: '',
          quType: '',
          repoId: '',
          chapterId: '',
          excludes: [],
          pointCodes: []
        }
      },

      // 选定的数据列表
      selectedList: [],

      options: {
        // 可批量操作
        multi: true,
        multiShow: false,
        // 列表请求URL
        listUrl: '/api/qu/qu/paging-with-answer'
      },

      showDetail: false,
      pointRoot: ''
    }
  },

  watch: {

    // 检测查询变化
    dialogShow: {
      handler() {
        this.dialogVisible = this.dialogShow
      },
      deep: true
    },

    quType: {
      handler() {
        this.listQuery.params.quType = this.quType
      },
      deep: true
    },

    excludes: {
      handler() {
        this.listQuery.params.excludes = this.excludes
      },
      deep: true
    },
    'listQuery.params.repoId': {
      handler() {
        this.listQuery.params.chapterId = ''
      },
      deep: true
    }
  },

  created() {
    this.dialogVisible = this.dialogShow
    this.listQuery.params.quType = this.quType
    this.listQuery.params.forExam = this.forExam
  },

  methods: {

    // 知识点
    repoChange(v) {
      this.pointRoot = v.pointCode
      this.listQuery.params.pointCodes = []
    },
    handleSelected(obj) {
      this.selectedList = obj.objs
      this.selectedLabel = '确认' + this.selectedList.length + '项'
    },

    handleClose() {
      this.$emit('update:dialogShow', false)
      this.$emit('close', this.selectedList)
      this.$refs.pagingTable.clearSelection()
    },

    handleConfirm() {
      this.$emit('update:dialogShow', false)
      this.$emit('select', this.selectedList)
      this.$refs.pagingTable.clearSelection()
    }

  }
}
</script>

<style scoped>

  ::v-deep .qu-box {
    margin-bottom: 0;
  }
  ::v-deep .qu-item {
    margin-bottom: 0;
  }

  ::v-deep .el-table .cell.el-tooltip p{
    white-space: wrap !important;
  }
</style>
